<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="robots" content="all">
    <title>我的预约</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="new/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Customizable CSS -->
    <link rel="stylesheet" href="new/css/main.css">
    <link rel="stylesheet" href="new/css/blue.css">
    <link rel="stylesheet" href="new/css/owl.carousel.css">
    <link rel="stylesheet" href="new/css/owl.transitions.css">
    <link rel="stylesheet" href="new/css/animate.min.css">
    <link rel="stylesheet" href="new/css/rateit.css">
    <link rel="stylesheet" href="new/css/bootstrap-select.min.css">

    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="new/css/font-awesome.css">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Barlow:200,300,300i,400,400i,500,500i,600,700,800"
          rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,600italic,700,700italic,800'
          rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <style>
        /* 在引入的css文件中写入这个*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body class="cnt-home">
<div id="indexContent" v-cloak>
    <!-- ============================================== HEADER ============================================== -->
    <header class="header-style-1">

        <!-- ============================================== TOP MENU ============================================== -->
        <div class="top-bar animate-dropdown">
            <div class="container">
                <div class="header-top-inner">
                    <div class="cnt-account">
                        <ul class="list-unstyled">
                            <li class="wishlist"><a href="index.html"><span>首页</span></a></li>
                            <li v-if="isLogin" class="check"><a href="javascript:;" @click="logout"><span>退出</span></a></li>
                            <li v-else class="login"><a href="Login.html"><span>登录</span></a></li>
                        </ul>
                    </div>

                    <div v-if="isLogin" class="cnt-block">
                        <ul class="list-unstyled list-inline">
                            <li class="dropdown dropdown-small"> <a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><span class="value">欢迎你：{{nickname}}</span><b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="MyCart.html">我的预约</a></li>
                                    <li><a href="MyFocus.html">我的关注</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <!-- /.header-top-inner -->
            </div>
            <!-- /.container -->
        </div>
        <!-- /.header-top -->
        <!-- ============================================== TOP MENU : END ============================================== -->
        <div class="main-header">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-3 logo-holder">
                        <!-- ============================================================= LOGO ============================================================= -->
                        <div class="logo"><a href="index.html"> <img src="new/images/logo.png" alt="logo"> </a></div>
                        <!-- /.logo -->
                        <!-- ============================================================= LOGO : END ============================================================= -->
                    </div>
                    <!-- /.logo-holder -->

                    <div class="col-lg-7 col-md-6 col-sm-8 col-xs-12 top-search-holder">
                        <!-- /.contact-row -->
                        <!-- ============================================================= SEARCH AREA ============================================================= -->
                        <div class="search-area">
                            <form>
                                <div class="control-group">
                                    <ul class="categories-filter animate-dropdown">
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">搜索</a>
                                    </ul>
                                    <input class="search-field" placeholder="Search here..."/>
                                    <a class="search-button" href="#"></a></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="body-content outer-top-vs" id="top-banner-and-menu">
        <div class="container">
            <div class="row">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="日期"
                            width="120">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px">
                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
                    <el-button @click="toggleSelection()">取消选择</el-button>
                </div>
            </div>
        </div>
    </div>

    <footer id="footer" class="footer color-bg">
        <div class="copyright-bar">
            <div class="container">
                <div class="col-xs-12 col-sm-4 no-padding copyright">Copyright &copy; 2020.From graduation project.
                </div>
            </div>
        </div>
    </footer>
</div>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="new/js/jquery-1.11.1.min.js"></script>
<script>
    var vm = new Vue({
        el: "#indexContent",
        data: {
            isLogin : false,
            user: null,
            nickname : '可爱的乖乖',
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            multipleSelection: []
        },
        created: function () {
            var vms = this;
            vms.selectUser();

        }, //属性过滤器

        methods: {
            selectUser: function () {
                var that = this;
                const isLogin = window.localStorage.getItem("isLogin");
                if (isLogin) {
                    that.user = window.localStorage.getItem("user");
                    that.isLogin = true;
                }
            },
            logout: function () {
                window.localStorage.clear();
                window.location.href = "index.html";
            },
        }
    });
</script>
</body>
</html>

